<template>
    <div v-loading="isLoading" class="min-h-[700px]">
        <div :style="{ fontSize: 'var(--font-size-1)', marginBottom: '20px' }">
            {{ isNullOrEmpty( formInline?.productName ) }}
        </div>
        <el-tabs v-model="activeName">
            <el-tab-pane v-for="(item, index) in tabList" :label="item.label" :key="index" :name="item.name">
                <component v-show="activeName === item.name" :is="item.com" :productInfo="formInline"
                    @editTypes="editTypes" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import productModel from './components/product-model/index.vue'
import dataStructures from './components/data-structure/index.vue'
import controlCommands from './components/control-command/index.vue'
import alarmEvents from './components/alarm-event/index.vue'
import type { infoType } from '@/api/manage/product-management/product-type/index';
type FormProps = {
    formInline: infoType,
    isLoading: boolean
}
const activeName = ref('productInfo')
const tabList = [
    { name: 'productInfo', label: '产品信息', com: productModel },
    { name: 'dataStructure', label: '数据结构', com: dataStructures },
    { name: 'controlCommand', label: '控制命令', com: controlCommands },
    { name: 'alarmEvent', label: '告警事件', com: alarmEvents }
]
const props = withDefaults(defineProps<FormProps>(), {
    formInline: () => ({} as infoType),
    isLoading: false
});
const emit = defineEmits(['editTypes'])
const editTypes = () => {
    emit('editTypes')
}


</script>
